<template>
	<view class="homeLayout">
		<view class="head">
			<home-head></home-head>
		</view>
		<view class="body">
			<!-- 轮播区域 -->
			<view class="swiperOut">
				<swiper vertical @change="swiperChange">
					<!-- vertical:纵向滑动 -->
					<swiper-item v-for="(item, index) in listData" :key="index">
						<navigator url="/pages/detail/detail" class="content">
							<soup-tab-group></soup-tab-group>
							<soup-text-content maxline="5"></soup-text-content>
						</navigator>
						<interactive-bar></interactive-bar>
					</swiper-item>
					<!-- 广告位 -->
					<swiper-item class="ad-swiper">
						<ad-swiper></ad-swiper>
					</swiper-item>
					
				</swiper>
			</view>
			<!-- 进度条 -->
			<view class="progress">
				<view class="line" :style="{width:lineWidth+'%'}"></view>
			</view>
		</view>
		
		<uni-popup ref="usePopup" type="center" @maskClick="closeUsePopup">
			<view class="usePopup">
				<image src="../../static/images/upward.png" 
				mode="heightFix" @click="closeUsePopup"></image>
			</view>
		</uni-popup>

		
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import {onReady} from"@dcloudio/uni-app"
	
const listData = ref([1,2,3,4,5]);	
const currentIndex = ref(0);	// 当前数据的索引
const usePopup = ref()		// 使用操作指引弹窗


// 页面加载完成
onReady(()=>{
	let useState = uni.getStorageSync("useState") || false;
	if (!useState){
		usePopup.value.open()
	}
})

// 获取当前滑动的索引
const swiperChange = (e) =>{
	currentIndex.value = e.detail.current;
}

// 计算属性：进度条的宽度
const lineWidth = computed(()=>currentIndex.value / (listData.value.length) * 100)

// 点击操作的遮罩层
const closeUsePopup = ()=> {
	usePopup.value.close();
	uni.setStorageSync("useState", true);	// 记录用户点击行为
	
}

</script>

<style lang="scss" scoped>
.homeLayout{
	height: 100vh;
	background: #BDE1FB;
	display: flex;
	flex-direction: column;	// 垂直排列子元素
	.head{
		// height: 350rpx;

	}
	.body{
		flex: 1;	// 父级设置flex后,body区域可以动态填充
		background: #fff;
		border-radius: 50rpx 50rpx 0 0;
		overflow: hidden;	//溢出隐藏，以便呈现圆角效果
		.swiperOut{
			height: calc(100% - 8rpx);		// 此时是为了预留出process的高度
			swiper{
				height: 100%;
				swiper-item{
					.content{
						height: calc(100% - 130rpx);						
						display: flex;
						justify-content: center;
						flex-direction: column;
						padding:0 30rpx;
					}
				}

			}

		}
		.progress{
			height: 8rpx;
			width: 100%;
			background: #eee;
			.line{
				height: 100%;
				width: 0%;
				background: linear-gradient(to right,#BCE0FD,#74dbef);
			}
		}
		
	}
	
}	
	

.usePopup{
	padding-top: 15vh;
	image{
		height: 150rpx;
		transform: translateY(250rpx);
		opacity: 0;		// 透明度
		animation: useanimate 1.5s infinite;
		
	}
}

// 操作指引动画
@keyframes useanimate{
	0%{
		transform: translateY(250rpx);
		opacity: 0;
	}
	100%{
		transform: translateY(-250rpx);
		opacity: 1;
	}
}
</style>
